<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>newproject</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css"/>
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <div class="page">
     
        
      <div class="page-content d-flex align-items-stretch"> 
        <!-- Side Navbar -->
       
        <div class="content-inner" style="width: 100%;">
          <!-- Page Header-->
         
          <!-- Forms Section-->
          <section class="forms no-padding-top"> 
            <div class="container-fluid">
              <div class="row">
              
                <!-- Form Elements -->
                <div class="col-lg-12" >
                  <div class="card" >
                    <div class="card-close">
                      <div class="dropdown">
                        <button type="button" id="closeCard5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
                        <div aria-labelledby="closeCard5" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#" class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#" class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
                      </div>
                    </div>
                    <div class="card-header d-flex align-items-center">
                      <h3 class="h4">用户管理</h3>
                    </div>
                    <div class="card-body">
                      <form class="form-horizontal">
                        <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">用户名称</label>
                          <div class="col-sm-9">
                            <input type="text" name="Name" id="Name" class="form-control">
                          </div>
                        </div>
                        <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">用户账号</label>
                          <div class="col-sm-9">
                            <input type="text" disabled="true" name="userName" id="userName" class="form-control">
                          </div>
                        </div>
                        <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">用户角色</label>
                          <div class="col-sm-9 easyui-panl" >
                           <input class="easyui-tagbox" id="roles" style="width:100%" data-options="
															url: 'tagbox_data1.json',
															method: 'get',
															value: '',
															valueField: 'id',
															textField: 'text',
															limitToList: true,
															hasDownArrow: true,
															prompt: 'Select a role'
															">

                          </div>
                        </div>
                        <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">所属主管</label>
                          <div class="col-sm-9">
                            <select name="manager" id="manager" class="form-control mb-3">
                              <option>option 1</option>
                              <option>option 2</option>
                              <option>option 3</option>
                              <option>option 4</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group row no-padding-bottom">
                          <label class="col-sm-3 form-control-label">所属主账号</label>
                          <div class="col-sm-9">
                            <input type="text" disabled="true" id="mainAccount" class="form-control">
                          </div>
                        </div>
                        <div class="line no-margin-top"></div>
                        <div class="form-group row" style="height: auto;">
                          <label class="col-sm-3 form-control-label">已有权限</label>
                          <div id="powerBox-role" class=" col-sm-7" style="min-height: 200px;border:1px solid gainsboro">
	                        			
	                        </div>
	                        <div class="form-group row">
                          <div class="col-sm-4 offset-sm-3">
                            
                            <label id="AddRoleBtn"  class="btn btn-primary">分配权限</label>
                          </div>
                        </div>
	                        
	                        
                        </div>
                        
                        <div id="allRoleBox" class="form-group row" style="height: auto;" hidden>
                          <label class="col-sm-3 form-control-label">全部权限</label>
                          <div id="powerBox-all" class=" col-sm-7" style="min-height: 200px;border:1px solid gainsboro">
	                        			
	                        </div>
	                        
                        </div>
                        <div class="line"></div>
                        
                       
                        <div class="line"></div>
                        <div class="form-group row">
                          <div class="col-sm-4 offset-sm-3">
                            
                            <label id="submitBtn"  class="btn btn-primary">确定</label>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
         
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
      <script type="text/javascript" src="js/jquery.easyui.min.js" ></script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script type="text/javascript">
    //拖拽事件预定义
    	
    	$(function(){
			$('.power').draggable({
				proxy:'clone',
				revert:true,
				cursor:'auto',
				onStartDrag:function(){
					$(this).draggable('options').cursor='not-allowed';
					$(this).draggable('proxy').addClass('bg-gray');
				},
				onStopDrag:function(){
					$(this).draggable('options').cursor='auto';
				}
			});
			
			$('#powerBox-role').droppable({
				accept:'.power',
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(source).draggable('proxy').css('border','1px solid red');
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
					$(source).draggable('proxy').css('border','1px solid #ccc');
				},
				onDrop:function(e,source){
					$(source).addClass('bg-green');
					$(this).append(source)
					
				}
			});
			
			$('#powerBox-all').droppable({
				accept:'.power',
				onDragEnter:function(e,source){
					$(source).draggable('options').cursor='auto';
					$(source).draggable('proxy').css('border','1px solid red');
				},
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
					$(source).draggable('proxy').css('border','1px solid #ccc');
				},
				onDrop:function(e,source){
					$(this).append(source)
					$(source).removeClass('bg-green');
				}
			});
			
			
		});

	 //绑定分配权限按钮事件
    $("#AddRoleBtn").bind("click",function(){
    	$('#allRoleBox').removeAttr('hidden');
    });
    //绑定提交按钮事件
    $('#submitBtn').bind('click',function(){
    	getUser();
    });
    
    //初始化所有权限
    function initPower(){
    	
    	//需从后端获取
    	
    	var temp;
    	for(var i =0 ;i<10;i++){
    		temp = '<div class="btn btn-primary float-left power" style="margin-left: 10px;margin-top: 5px;" id="role_id'+i+'">quanxian'+i+'</div>';
    		$('#powerBox-all').append(temp);
    	}
    	
    }
    
    
    
    function getUser(){
    	var userName = $('#userName').val();
    	var name = $('#userName').val();
    	var roles =$("#roles").val();
    	var manager = $('#manager').val();
    	var powers = "";
    	
    	$("#powerBox-role").find("div.power").each(function(i,e){
    		powers = $(e).attr("id")+ ","+powers;
    		
    	});
    	console.log( new user(userName,name,roles,manager,powers.substring(0,powers.length-1)));
    
    }
    
    	
    	initPower();
    
		function user(userName, name, roles, manager, powers){
			if(userName==''){
				alert("用户名不能为空！");
				$('#userName').focus();
				return;
			}
			this.userName = userName;
			this.name = name;
			this.roles = roles;
			this.manager = manager;
			this.powers = powers;
		}
    	
    </script>
  </body>
</html>
